<template>
  <v-container id="page-colors" fluid grid-list-xl>
    <v-layout row wrap>
      <v-flex class="mb-3" xs12>
        <v-text-field v-model="search" prepend-icon="filter_list" solo="solo" label="Search Materil Colors" single-line="single-line"/>
      </v-flex>
      <v-flex v-for="(color, key) in computedColors" :key="key" xs12 sm6 md4>
        <v-card :color="key" tile="tile">
          <v-card-text>
            <h3 class="white--text">{{ key }}</h3>
          </v-card-text>
        </v-card>
        <v-card v-for="(subColor, key2) in color" :color="`${key} ${convertToClass(key2)}`" :class="getColorClass(key2)" :key="key2" tile="tile">
          <v-card-text>
            <v-layout>
              <v-flex class="caption" xs8="xs8"><span v-if="key !== 'shades'">{{ key }}&nbsp;</span><span v-if="key2 !== 'base'">{{ key2.replace(/(.*)(\d)/, '$1-$2') }}</span></v-flex>
              <v-flex class="text-xs-right" xs4="xs4"><span v-if="subColor !== 'transparent'">{{ subColor.toUpperCase() }}</span></v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import colors from 'vuetify/es5/util/colors'
import Util from '@/util'

export default {
  data: () => ({
    colors,
    search: ''
  }),

  computed: {
    computedColors() {
      const colors = {}
      const search = this.search.toLowerCase()

      Object.keys(this.colors).forEach(key => {
        const kebabKey = Util.kebab(key).toLowerCase()

        if (kebabKey.indexOf(search) > -1) {
          colors[kebabKey] = this.colors[key]
        }
      })

      return colors
    }
  },

  methods: {
    endStr(str) {
      return str[str.length - 1]
    },
    convertToClass(str) {
      const end = this.endStr(str)
      const sub = str.substr(0, str.length - 1)

      if (isNaN(parseInt(end, 10))) return str

      return `${sub}-${end}`
    },
    getColorClass(key) {
      if (['white', 'transparent'].includes(key) ||
        key.indexOf('light') > -1 ||
        key.indexOf('accent') > -1
      ) return 'black--text'

      return 'white--text'
    }
  }
}
</script>

<style lang="stylus">
  #colors-page
    .flex
      margin: 1rem 0

    .card
      color: #fff
      font-weight: 500
      letter-spacing: .5px
      padding: 1rem
      border-radius: 0

      .card__text
        h3
          color: #fff
          align-self: flex-start
          font-size: 1.5rem
          margin: 0

    .card__text
      padding: 0
</style>
